<template>
  <div class="info-block home-section">
    <div class="block-tabs">
      <div
          v-for="item in tabsList"
          class="tab-item home-title"
          :class="{ 'is-active': item.name === activeName }"
          :key="item.name"
          @click="tabsClick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="info-cards">
      <div v-for="item in currList" :key="item.id" class="card">
        <router-link
            :to="{
            name: 'SupplyDetail',
            query: { id: item.id, type: activeName },
          }"
            target="_blank"
        >
          <div class="card-title flex items-center justify-between" style="margin-bottom: 10px ">
            <div class="title-text">
              {{ (item.supplyTitle || item.demandTitle).length > 10
                ? (item.supplyTitle || item.demandTitle).slice(0, 10) + '...'
                : (item.supplyTitle || item.demandTitle) }}

            </div>
            <div class="card-time">{{ item.createTime.slice(0, 10) }}</div>



          </div>

          <div class="location">
            <img src="@/assets/location.svg" alt="" />
            {{item?.provinceName}}
            {{ item?.cityName }}
          </div>
        </router-link>
      </div>
    </div>
    <More :path="`/supply?type=${activeName}`" />
  </div>
</template>

<script setup>
import More from "./more.vue";
import { ref, computed, watch, inject } from "vue";

const tabsList = ref([
  { label: "供给信息", name: "supply" },
  {label: "需求信息", name: "demand"},
]);
const activeName = ref("supply");
const tabsClick = (item) => {
  activeName.value = item.name;
};

const $api = inject("$api");
const list = ref({
  demand: [],
  supply: [],
});
const currList = computed(() => list.value[activeName.value]);
const getList = async (key) => {
  const apiName = key === "supply" ? "getSupplyList" : "getDemandList";
  const {data: rows} = await $api.supply[apiName]({
    pageSize: 12,
    pageNum: 1,
    status: 1,
  });
  if (!Array.isArray(rows)) return;
  list.value[key] = rows;
};
watch(
    () => activeName.value,
    (val) => {
      if (!list.value[val]?.length) getList(val);
    },
    {
      immediate: true,
    }
);
</script>

<style scoped lang="less">
.info-block {
  padding: 72px 0 48px;
  background: @bg-color;

  .block-tabs {
    margin-bottom: 70px;
    display: flex;
  }

  .tab-item {
    position: relative;
    cursor: pointer;

    &:last-child {
      margin-left: 54px;
    }

    &.is-active::after {
      content: "";
      position: absolute;
      bottom: -14px;
      left: calc(50% - 18px);
      width: 36px;
      height: 6px;
      background: @active-gradient;
    }
  }
}

.info-cards {
  width: 95%;
  margin-bottom: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .card {
    box-sizing: border-box;
    width: 432px;
    margin-bottom: 16px;
    margin-right: 16px;
    background: #fff;
    padding: 16px 24px 22px 28px;
    border: 2px solid transparent;
    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.07);

    &:nth-child(3n) {
      //margin-right: 0;
    }

    &:hover {
      border-image: linear-gradient(121deg, #0749f2 43%, #ff0d73 97%) 1.5;
      box-shadow: 0px 6px 10px 0px rgba(3, 39, 129, 0.2);
    }

    &-title {

      .title-text {
        width: 60%;

        font-size: 18px;
        font-weight: 500;
        color: @text-default;
      }

      .location {
        max-width: 40%;
        display: inline-flex;
        align-items: center;



        img {
          width: 13px;
          height: 15px;
          margin-right: 5px;
        }

        span {
          font-size: 16px;
          color: @text-light;
        }
      }
    }

    &-time {
      font-size: 14px;
      color: @text-light;
      margin-top: 15px;
    }
  }
}

@media screen and (max-width: 1200px) {
  .info-cards {
    .card {
      width: 48%;
      margin-right: 2%;

      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .info-block {
    padding: 40px 0 24px;

    .block-tabs {
      margin-bottom: 40px;

      .tab-item {
        font-size: 14px;

        &:last-child {
          margin-left: 30px;
        }
      }
    }
  }

  .info-cards {
    .card {
      width: 100%;
      margin-right: 0;
      margin-bottom: 12px;
      padding: 12px 16px 16px 20px;

      .card-title {
        .title-text {
          font-size: 16px;
        }

        .location {
          img {
            width: 11px;
            height: 13px;
            margin-right: 4px;
          }

          span {
            font-size: 14px;
          }
        }
      }

      .card-time {
        font-size: 12px;
      }
    }
  }
}
</style>
